<template>
  <div class="demo">
    <div class="demo-title">线性样式</div>
    <div class="demo-content">
      <Space direction="vertical">
        <Switch
          v-model:checked="treeLine"
          checked-children="treeLine"
          un-checked-children="treeLine"
        />
        <Switch
          v-model:checked="showLeafIcon"
          :disabled="!treeLine"
          checked-children="showLeafIcon"
          un-checked-children="showLeafIcon"
        />
        <TreeSelect
          v-model:value="value"
          style="width: 300px"
          placeholder="Please select"
          :tree-line="treeLine && { showLeafIcon }"
          :tree-data="treeData"
        >
          <template #title="{ value: val, title }">
            <b v-if="val === 'ssc'" style="color: #08c">ssc</b>
            <template v-else>{{ title }}</template>
          </template>
        </TreeSelect>
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import Space from '@sscd/space';
  import Switch from '@sscd/switch';
  import TreeSelect from '@sscd/tree-select';
  import type { TreeSelectProps } from '@sscd/tree-select';
  const treeLine = ref(true);
  const showLeafIcon = ref(false);
  const value = ref<string>();
  watch(
    () => value,
    () => console.log(value.value)
  );
  const treeData = ref<TreeSelectProps['treeData']>([
    {
      title: 'parent 1',
      value: 'parent 1',
      children: [
        {
          title: 'parent 1-0',
          value: 'parent 1-0',
          children: [
            { title: 'my leaf', value: 'leaf1' },
            { title: 'your leaf', value: 'leaf2' },
          ],
        },
        { title: 'ssc', value: 'ssc' },
      ],
    },
  ]);
</script>
